<template>
  <div>
    <el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body center>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-suffix="：">
        <div class="header-block">
          <el-row :gutter="20" type="flex" align="center" class="mb8">
            <el-col :span="24" style="font-size: 24px; font-weight: bold">{{ $t('client_name') }}：{{ form.clientName }}</el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item :label="$t('client_name')" label-width="88px">
                {{ form.clientName }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('customManager')">
                {{ form.nickName }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item :label="$t('contact_person')" label-width="88px">
                {{ form.contactPerson }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('contact_phone_number')">
                {{ form.phone }}
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <el-card class="box-card" style="margin-bottom: 20px">
          <div slot="header" class="clearfix">
            <span>{{$t('client_information')}}</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item :label="$t('client_name')" prop="clientName">
                {{ form.clientName }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('client_code')" prop="clientCode">
                {{ form.clientCode }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('country_region')" prop="countriesRegions">
                {{ form.countriesRegions }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('default_language')" prop="defaultLanguage">
                <dict-tag :options="dict.type.language_type" :value="form.defaultLanguage" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('legal_representative')" prop="legalPerson">
                {{ form.legalPerson }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('license_type')" prop="defaultLanguage">
                <dict-tag :options="dict.type.id_card_type" :value="form.certificateType" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('license_number')" prop="idNumber">
                {{ form.idNumber }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('office_address')" prop="businessAddress">
                {{ form.businessAddress }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('contact_person_name')" prop="contactPerson">
                {{ form.contactPerson }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('contact_number')" prop="phone">
                {{ form.phone }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('email_address')" prop="emailAddress">
                {{ form.emailAddress }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('fax_number')" prop="">
                {{ form.faxNo }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <el-card class="box-card" style="margin-bottom: 20px">
          <div slot="header" class="clearfix">
            <span>{{$t('bank_information')}}</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item :label="$t('bank_account_number')" prop="sysBankList.cardNumber">
                {{ form.sysBankList.cardNumber }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('account_holder')" prop="sysBankList.possessor">
                {{ form.sysBankList.possessor }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('bank_code')" prop="sysBankList.swiftCode">
                {{ form.sysBankList.swiftCode }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('branch_code')" prop="sysBankList.branchCode">
                {{ form.sysBankList.branchCode }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('bank_name_of_opening_account')" prop="sysBankList.openingBank">
                {{ form.sysBankList.openingBank }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('default_account')" prop="sysBankList.defaultAccount">
                <dict-tag :options="dict.type.yes_or_no" :value="form.sysBankList.defaultAccount" />
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item :label="$t('remarks')" prop="sysBankList.remark">
                {{ form.sysBankList.remark }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { getClient } from "@/api/custom/customerList";
import { getDockingAllUser } from "@/api/system/user";
export default {
  name: "customerDetail",
  dicts: ["id_card_type", "language_type", "yes_or_no"],
  components: {},
  data() {
    return {
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      // 表单参数
      form: {
        sysBankList: {},
      },
      // 表单校验
      rules: {},
      //经历信息表格数据
      experienceInfoList: [],
      bankInfoList: [],
      fixedPayList: [],
      notFixedPayList: [],
    };
  },
  created() { },
  methods: {
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        headPortrait: null,
        clientName: null,
        clientCode: null,
        countriesRegions: null,
        defaultLanguage: null,
        legalPerson: null,
        certificateType: null,
        businessAddress: null,
        contactPerson: null,
        emailAddress: null,
        faxNo: null,
        idNumber: null,
        phone: null,
        principal: null,
        sysBankList: {
          cardNumber: null,
          possessor: null,
          swiftCode: null,
          branchCode: null,
          openingBank: null,
          defaultAccount: null,
          remark: null,
        },
      };
      this.resetForm("form");
    },
    //获取客户集合
    getDockingAllUser(id) {
      getDockingAllUser().then((response) => {
        response.data.forEach(element => {
          if (element.userId == id) {
            this.form.nickName = element.nickName
            this.open = true;
            this.title = this.$t('client_information');
          }
        });
      })
    },
    /** 查看操作 */
    handleView(row) {
      this.reset();
      const id = row.id || this.ids;
      getClient(id).then((response) => {
        this.form = response.data;
        this.getDockingAllUser(this.form.principal)
      });
    },
  },
};
</script>
<style scoped lang="scss">
.header-block {
  padding: 0 20px;
}
</style>
